<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三子棋游戏</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#container{
				width: 606px;
				height: 608px;
				border: black solid 2px;
				margin: 80px auto;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				box-sizing: content-box;
			}
			#container div{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				text-align: center;
				font-size: 80px;
				line-height: 200px;
			}
			#head{
				text-align: center;
				width: 240px;
				height: 30px;
				color: #FF0000;
				margin:50px auto;
				/* top: 130px; */
				/* position: absolute; */
				/* left: 730px; */
			}
			.res{
				background-color: #F9A100;
				/* position: absolute; */
/* 				top: 850px;
				left: 740px; */
				font-size: 20px;
				width: 200px;
				height: 50px;
				color: white;
			}
			#bottom{
				margin: 0px auto;
				width: 200px;
				height: 80px;
			}
		</style>
			<!-- 引入jquery,或者导入本地JQuery文件 -->
			<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
	</head>
	<body>
<!-- 		<input type="radio" value="√" name="choice" onclick="update()"/>√ 先下
		<input type="radio" value="○" name="choice" onclick="update()"/>○ 先下 -->
		<div id="head">
			ATTENTION：默认 "√" 先下棋
		</div>
		<div id="container">
			<div id="11" onclick="change()">
				
			</div>
			<div id="12" onclick="change()">
				
			</div>
			<div id="13" onclick="change()">
				
			</div>
			<div id="21" onclick="change()">
				
			</div>
			<div id="22" onclick="change()">
				
			</div>
			<div id="23" onclick="change()">
				
			</div>
			<div id="31" onclick="change()">
				
			</div>
			<div id="32" onclick="change()">
				
			</div>
			<div id="33" onclick="change()">
				
			</div>
		</div>
		<div id="bottom">
			<button type="button" onclick="reset()" class="res"><b>重新开始</b></button>
		</div>
		<script type="text/javascript">
			// function update(){
			// 	var flag = event.target;
			// 	console.log(flag.value);
			// 	role = flag.value;
			// }
			// var array = new Array();
			// var i = 0;
			var times = 1;
			var win = "";
			function change(){
				// 获得触发事件的dom元素
				var dom = event.target;
				// 实现交替下棋
				if(times%2!=0) {
					dom.innerHTML="√";
				} else {
					dom.innerHTML="○";
				}
				// 用来分阵营和判断平局
				times++;
				
				// 判断输赢
				// 防止耍赖
				if(win == "○" || win == "√"){
					alert("胜负已分，请不要做无用的对抗！");
					return;
				} 
				
				var num = parseInt(dom.id);
				var row = Math.floor(num/10);
				var col = num%10;
				// console.log("测试:"+col);
				// 判断横向
				var row1 = jQuery("#"+"1"+col).text().trim();
				var row2 = jQuery("#"+"2"+col).text().trim();
				var row3 = jQuery("#"+"3"+col).text().trim();
				// 测试脚本
				// console.log("#"+col+"1");
				// console.log("#"+col+"2");
				// console.log("#"+col+"3");

				// 判断纵向
				var col1 = jQuery("#"+row+"1").text().trim();
				var col2 = jQuery("#"+row+"2").text().trim();
				var col3 = jQuery("#"+row+"3").text().trim();

				// 判断对角线
				var x1 = jQuery("#11").text().trim();
				var x2 = jQuery("#22").text().trim();
				var x3 = jQuery("#33").text().trim();
				
				var x4 = jQuery("#31").text().trim();
				var x5 = jQuery("#13").text().trim();
				
				if(row1 == row2 && row2 == row3 && row1!=""){
					if(row1 == "√") {
						win = "√";
						alert("√ 方胜利!");
					} else {
						win = "○";
						alert("○ 方胜利!");
					}
					return;
				} else if(col1 == col2 && col2 == col3 && col1!="") {
					if(col1 == "√") {
						win = "√";
						alert("√ 方胜利!");
					} else {
						win = "○";
						alert("○ 方胜利!");
					}
					return;
				} else if(x1 == x2 && x2 == x3 && x1!="") {
					if(x1 == "√") {
						win = "√";
						alert("√ 方胜利!");
					} else {
						win = "○";
						alert("○ 方胜利!");
					}
					return;
				} else if(x4 == x2 && x2 == x5 && x2!=""){
					if(x2 == "√") {
						win = "√";
						alert("√ 方胜利!");
					} else {
						win = "○";
						alert("○ 方胜利!");
					}
					return;
				}
				// 判断平局
				if(times == 10) {
					alert("平局!");
					return;
				}				
				// 调试脚本
				// console.log("row1:"+row1);
				// console.log("row2:"+row2);
				// console.log("row3:"+row3);
				// console.log("col1:"+col1);
				// console.log("col2:"+col2);
				// console.log("col3:"+col3);
				
			}
			
			function reset(){
				// 初始化全局变量
				win = "";
				times = 1;
				// 棋盘置空
				for(var i = 1;i <= 3;i ++) {
					var id1 = "#"+i+"1";
					var id2 = "#"+i+"2";
					var id3 = "#"+i+"3";
					jQuery(id1).text("");
					jQuery(id2).text("");
					jQuery(id3).text("");
				}
			}
		</script>
	</body>
</html>
